<template>
  <el-card shadow="hover" class="box-card">
    <div class="card-left" v-if="!props.type">
      <h3 class="leftTitle">Summary</h3>
      <el-row class="mb-4 spaceBetween">
        <div>Product cost</div>
        <div>23123</div>
      </el-row>
      <el-row class="mb-4 spaceBetween">
        <div>Shipping cost</div>
        <div>23123</div>
      </el-row>
      <el-row class="mb-4 spaceBetween">
        <div>Total Amount</div>
        <div>23123</div>
      </el-row>
      <el-row class="mb-4 spaceBetween">
        <div>Discount</div>
        <div class="t-red14">23123</div>
      </el-row>
      <el-divider />
      <el-row class="mb-4 spaceBetween">
        <div class="p-00014">You need to pay</div>
        <div class="t-red14">
          <strong> 40.27 USD</strong>
        </div>
      </el-row>
      <el-button class="leftBt" @click="onContinue" type="danger"
        >Continue</el-button
      >
    </div>

    <!-- OrderDetails -->
    <div class="card-left" v-if="props.type === 'OrderDetails'">
      <h3 class="leftTitle">Order information</h3>
      <el-row class="mb-4 spaceBetween">
        <div>Amount:</div>
        <div>23123</div>
      </el-row>
      <el-row class="mb-4 spaceBetween">
        <div>Shipping cost</div>
        <div>23123</div>
      </el-row>
      <el-row class="mb-4 spaceBetween">
        <div>Order time:</div>
        <div>23123</div>
      </el-row>
      <el-row class="mb-4 spaceBetween">
        <div>Fulfilled:</div>
        <div>23123</div>
      </el-row>
      <el-row class="mb-4 spaceBetween">
        <div>Store:</div>
        <div>
          <img
            class="m-t-3"
            src="@/assets/icons/Group1000002132.svg"
            alt=""
            srcset=""
          />
          23123
        </div>
      </el-row>

      <div class="m-b10">Shipping address:</div>
      <div>
        <img src="@/assets/icons/Clipboard.svg" alt="" srcset="" />
        United Kingdom
      </div>
      <div style="width: 80%; line-height: 19px">
        2972 Westheimer Rd. Santa Ana, Illinois 85486
      </div>
    </div>
  </el-card>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router";
const $router = useRouter();
const props = defineProps(["type"]);
const onContinue = () => {
  $router.push({
    path: "/Order/ScaleOrder/PaymentOrder",
  });
};
</script>

<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 0px;
  .card-left {
    padding: 20px;
    .leftTitle {
      color: var(--unnamed, #222);

      /* 文字/14px-bold */
      font-family: "Proxima Nova";
      font-size: 14px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px; /* 142.857% */
    }
    .spaceBetween {
      margin: 18px 0;
    }
    strong {
      font-weight: bold !important;
    }
    .leftBt {
      width: 100%;
      padding: 18px 0;
    }
  }
}
</style>
